<template>
  <div>
    <div class="item">
      <div class="tit">{{ title == undefined ? "图标样式：" : title }}</div>
      <div class="input">
        <div class="input-line">
          <span class="sp1"
            ><em
              class="radio"
              :class="icon.s == 1 ? 'on' : ''"
              @click="icon.s = 1"
            ></em>
            默认</span
          >
          <span class="sp1"
            ><em
              class="radio"
              :class="icon.s == 2 ? 'on' : ''"
              @click="icon.s = 2"
            ></em>
            隐藏</span
          >
          <span class="sp1"
            ><em
              class="radio"
              :class="icon.s == 3 ? 'on' : ''"
              @click="icon.s = 3"
            ></em>
            自定义</span
          >
        </div>
        <template v-if="icon.s == 3">
          <div class="input-line">
            <div class="module-upload" v-if="icon.z">
              <img :src="icon.z" class="avatar" />
              <i class="el-icon-close" @click="deleFile"></i>
            </div>
            <!-- <div class="module-upload" @click="selectImage" v-else>
							<i class="el-icon-camera-solid"></i>
							<input type="file" accept="image/*" name="file" id="fileupload" @change="upload" style="display: none;" />
						</div> -->
            <el-upload
              v-else
              class="upload-demo"
              :action="url"
              name="Files"
              :headers="upLoadHeader"
              :data="uploadData"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :multiple="false"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :file-list="fileList"
			  :on-error="uploadError"
            >
              <!-- <el-button size="small" type="primary">点击上传</el-button>
						    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              <i
                class="el-icon-plus avatar-uploader-icon"
                style="
                  border: 1px dashed #8c939d;
                  border-radius: 3px;
                  line-height: 58px;
                  color: #8c939d;
                  width: 58px;
                  height: 58px;
                  font-size: 14px;
                  margin-right: 10px;
                "
              ></i>
            </el-upload>
            <div class="tips">
              点击可添加图标
              <br />
              建议尺寸：{{ size }}
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api.js";
export default {
  name: "AttrIcon",
  props: ["icon", "title", "size"],
  data() {
    return {
      fileList: [],
      url: "",
      uploadData: {
        Module: "app",
      },
      upLoadHeader: {
        Authorization: "",
      },
    };
  },
  created() {
    this.url = api.url + "/api/Common/Files/Upload";
    this.upLoadHeader.Authorization = this.$store.state.token;
  },
  methods: {
    selectImage() {
      document.getElementById("fileupload").click();
    },

    async upload(e) {
      var that = this;
      let file = e.target.files[0];
      let arr = [];
      arr.push({ name: file.name, size: file.size, path: file });
      let loading = this.$loading({ text: "上传中" });
      this.$util.uploadImg(arr, function (res) {
        that.icon.z = res;
        loading.close();
      });
    },

    //删除文件
    async deleFile() {
      // const json = await this.$api.deleteFile({ m: 'get', q: { fileUrl: this.icon.z } });
      this.icon.z = "";
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
	uploadError() {
      this.$message.error("图片上传失败,请重新上传");
    },
    handleSuccess(file, fileList) {
      if (file.businessStatus == 1) {
        this.icon.z = file.data.fileUrl;
      } else {
        this.icon.z = "";
        this.$message.error("上传失,请重新上传");
      }
    },
  },
};
</script>

<style scoped>
.tit {
  white-space: nowrap !important;
}
</style>
